<template>
  <div style="height: 100%">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="接口名称:">
            <el-input
              size="mini"
              v-model="StepDetails.name"
              style="width: 240px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请求方式:">
            <el-select
              size="mini"
              v-model="StepDetails.method"
              placeholder="请选择请求方式"
              style="width: 240px"
            >
              <el-option label="get" value="get"></el-option>
              <el-option label="post" value="post"></el-option>
              <el-option label="delete" value="delete"></el-option>
              <el-option label="put" value="put"></el-option>
            </el-select>
            <el-button
              size="mini"
              type="primary"
              style="float: right"
              @click="getBack()"
            >返回
            </el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="域 名:">
            <el-input
              size="mini"
              v-model="StepDetails.domain"
              placeholder="请输入域名"
              style="width: 240px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="调试环境:">
            <el-select
              v-model="envValue"
              placeholder="请选择"
              style="width: 240px"
              size="mini"
            >
              <el-option
                v-for="item in envList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="接口地址:">
            <el-input
              size="mini"
              v-model="StepDetails.path"
              placeholder="请输入请求地址"
              style="width: 945px"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="Params" name="first">
            <el-table
              :data="StepDetails.requestParams"
              :show-header="false"
              max-height="400"
              size="mini"
            >
              <el-table-column prop="key">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.key"
                    @input="
                      inputChangedF(scope.$index, StepDetails.requestParams)
                    "
                    placeholder="key"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="value">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.value"
                    placeholder="value"
                  ></el-input>
                </template>
              </el-table-column>
              <!-- <el-table-column width="40">
              <template slot-scope ="scope">
                <i class="el-icon-circle-plus-outline"  @click="handleAdd(scope.$index, scope.row)"></i>
              </template>
            </el-table-column> -->
              <el-table-column width="40">
                <template slot-scope="scope">
                  <i
                    class="el-icon-remove-outline"
                    v-if="scope.row.key != ''"
                    @click="
                      handleDelete(scope.$index, StepDetails.requestParams)
                    "
                  ></i>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="Header" name="second">
            <el-table
              :data="StepDetails.requestHeader"
              :show-header="false"
            >
              <el-table-column prop="key">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.key"
                    @input="
                      inputChangedF(scope.$index, StepDetails.requestHeader)
                    "
                    placeholder="key"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="value">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.value"
                    placeholder="value"
                  ></el-input>
                </template>
              </el-table-column>
              <!-- <el-table-column width="40">
              <template slot-scope ="scope">
                <i class="el-icon-circle-plus-outline"  @click="handleAdd(scope.$index, scope.row)"></i>
              </template>
            </el-table-column> -->
              <el-table-column width="40">
                <template slot-scope="scope">
                  <i
                    class="el-icon-remove-outline"
                    v-if="scope.row.key != ''"
                    @click="
                      handleDelete(scope.$index, StepDetails.requestHeader)
                    "
                  ></i>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="Body" name="third">
            <div>
              <template>
                <el-radio-group v-model="radio" @change="xg">
                  <el-radio label="form">data-form</el-radio>
                  <el-radio label="raw">raw</el-radio>
                </el-radio-group>
              </template>
              <el-button v-if="radio == 'raw'" type="text" style="float: right" @click="beautiful()">beautiful
              </el-button>
            </div>
            <div v-if="radio == 'form'">
              <el-table
                :data="StepDetails.requestDataParams"
                :show-header="false"
                max-height="400"
              >
                <el-table-column prop="key">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.key"
                      @input="
                        inputChangedF(
                          scope.$index,
                          StepDetails.requestDataParams
                        )
                      "
                      placeholder="key"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="value">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.value"
                      placeholder="value"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column width="40">
                  <template slot-scope="scope">
                    <i
                      class="el-icon-remove-outline"
                      v-if="scope.row.key != ''"
                      @click="
                        handleDelete(
                          scope.$index,
                          StepDetails.requestDataParams
                        )
                      "
                    ></i>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div>
              <template>
                <editor
                  v-if="radio == 'raw'"
                  v-model="editor"
                  @init="editorInit"
                  lang="json"
                  :options="editorOptions"
                  theme="chrome"
                  width="100%"
                  height="200"
                >
                </editor>


              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="断言" name="fourth">
            <el-table
              :data="StepDetails.requestAssert"
              :show-header="false"
            >
              <el-table-column prop="checkList">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.checkList"
                    @input="
                      inputChangedA(scope.$index, StepDetails.requestAssert)
                    "
                    placeholder="key"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="value">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.value"
                    placeholder="value"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column width="40">
                <template slot-scope="scope">
                  <i
                    class="el-icon-remove-outline"
                    v-if="scope.row.checkList != ''"
                    @click="
                      handleDelete(scope.$index, StepDetails.requestAssert)
                    "
                  ></i>
                </template>
              </el-table-column>
            </el-table
            >
          </el-tab-pane>
          <el-tab-pane label="提取参数" :name="'parameterExtraction'">
            <el-table
              :data="StepDetails.parameterExtractions"
              :show-header="false"
            >
              <el-table-column prop="dataType" width="200px">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.dataType"
                    placeholder="请选择"
                    style="width: 180px"
                    size="mini"
                  >
                    <el-option
                      v-for="item in dataTypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="extractName">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.extractName"
                    @input="
                      inputChangedP(scope.$index, StepDetails.parameterExtractions)
                    "
                    placeholder="extractName"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="expression">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.expression"
                    placeholder="expression"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column width="40">
                <template slot-scope="scope">
                  <i
                    class="el-icon-remove-outline"
                    v-if="scope.row.extractName != ''"
                    @click="
                      handleDelete(scope.$index, StepDetails.parameterExtractions)
                    "
                  ></i>
                </template>
              </el-table-column>
            </el-table
            >
          </el-tab-pane>
          <el-tab-pane label="前置处理器" name="preProcessor">
            <el-form label-width="130px">
              <el-form-item label="处理器参数类型：">
                <el-select
                  v-model="preProcessor.type"
                  placeholder="请选择"
                  style="width: 240px"
                  size="mini"
                >
                  <el-option
                    v-for="item in processorTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"

                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数据库连接：" v-show="preProcessor.type=='1'">
                <el-select
                  v-model="preProcessor.dbConnectionId"
                  placeholder="请选择"
                  style="width: 240px"
                  size="mini"
                >
                  <el-option
                    v-for="item in dbConnectionList"
                    :key="item.id"
                    :label="item.dbConnectionName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="内容：">
                <el-input type="textarea" v-model="preProcessor.content"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="后置处理器" name="postProcessor">
            <el-form label-width="130px">
              <el-form-item label="处理器参数类型：">
                <el-select
                  v-model="postProcessor.type"
                  placeholder="请选择"
                  style="width: 240px"
                  size="mini"
                >
                  <el-option
                    v-for="item in processorTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数据库连接：" v-show="postProcessor.type=='1'">
                <el-select
                  v-model="postProcessor.dbConnectionId"
                  placeholder="请选择"
                  style="width: 240px"
                  size="mini"
                >
                  <el-option
                    v-for="item in dbConnectionList"
                    :key="item.id"
                    :label="item.dbConnectionName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="内容：">
                <el-input type="textarea" v-model="postProcessor.content"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item style="margin-bottom: 10px; margin: 0 auto">
        <el-button type="primary" @click="onSubmit" size="mini"
        >用例步骤更新
        </el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {inputChanged} from "@/js/apiPageJs/apiDetails";
  import YamlEditor from '@/components/YamlEditor/index.vue';
  import CodeFormat from "@/components/test";

  export default {
    props: {
      StepDetails: {
        type: Object,
      },
      envList: {
        type: Array,
      },
    },
    components: {
      CodeFormat,
      editor: require("vue2-ace-editor"),
    },
    watch: {
      StepDetails: function (val, newval) {
        console.log("进入方法")
        // console.log(val.requestParams);
        // console.log(newval.requestParams);
        if (this.StepDetails.testCaseProcessors != null && this.StepDetails.testCaseProcessors.length> 0) {
          this.StepDetails.testCaseProcessors.forEach(testCaseProcessor => {
            console.log("进入forEach:",testCaseProcessor)
            if (testCaseProcessor.processorType == 0) {
              this.preProcessor = testCaseProcessor
            }
            if (testCaseProcessor.processorType == 1) {
              this.postProcessor = testCaseProcessor
            }
          });
        }else {
           this.preProcessor = {
            id: "",
            stepId: this.StepDetails.id,
            type: 0,
            processorType: 0,
            dbConnectionId: "",
            content: "",
          }
          this.postProcessor ={
            id: "",
            stepId: this.StepDetails.id,
            type: 0,
            processorType: 1,
            dbConnectionId: "",
            content: "",
          }
        }
        this.radio = this.StepDetails.requestParamType;
        this.editor = this.StepDetails.requestBody;
        this.envValue = this.StepDetails.envId;
        console.log(val);
        if (!val.requestParams) {
          this.StepDetails.requestParams = [{key: "", val: ""}];
        } else if (
          val.requestParams.length == 0 ||
          val.requestParams[val.requestParams.length - 1].key != ""
        ) {
          this.StepDetails.requestParams.push({
            key: "",
            value: "",
          });
        }
        if (!val.requestHeader) {
          this.StepDetails.requestHeader = [{key: "", val: ""}];
        } else if (
          val.requestHeader.length <= 0 ||
          val.requestHeader[val.requestHeader.length - 1].key != ""
        ) {
          this.StepDetails.requestHeader.push({
            key: "",
            value: "",
          });
        }
        if (!val.requestAssert) {
          this.StepDetails.requestAssert = [{checkList: "", val: ""}];
        } else if (
          val.requestAssert.length <= 0 ||
          val.requestAssert[val.requestAssert.length - 1].checkList !=
          ""
        ) {
          this.StepDetails.requestAssert.push({
            checkList: "",
            value: "",
          });
        }
        if (!val.requestDataParams) {
          this.StepDetails.requestDataParams = [{key: "", val: ""}];
        } else if (
          val.requestDataParams.length <= 0 ||
          val.requestDataParams[val.requestDataParams.length - 1].key !=
          ""
        ) {
          this.StepDetails.requestDataParams.push({
            key: "",
            value: "",
          });
        }
        if (!val.parameterExtractions) {
          this.StepDetails.parameterExtractions = [{dataType: 0, expression: "", extractName: ""}]
        } else if (
          val.parameterExtractions.length <= 0 ||
          val.parameterExtractions[val.parameterExtractions.length - 1].key !=
          ""
        ) {
          this.StepDetails.parameterExtractions.push({dataType: 0, expression: "", extractName: ""});
          console.log(this.StepDetails.parameterExtractions);
          // console.log("监测成功");
        }
        console.log(this.StepDetails.requestDataParams);
        // console.log("监测成功");
      },
      deep: true,
      immediate: true
    },
    data() {
      return {
        dataType:0,
        dataTypeList:[
          {
            id:0,
            name:"提取消息头内容",

          },{
            id:1,
            name:"提取返回内容",
          }
        ],
        //   childrenName:this.name,
        // getStepDetails:this.StepDetails,
        dbConnectionList: [],
        processorTypeList: [{
          id: 0,
          name: "java脚本",
        },
          {
            id: 1,
            name: "updateSql",
          }],
        preProcessor: {
          id: "",
          stepId: "",
          type: 0,
          processorType: 0,
          dbConnectionId: "",
          content: "",
        },
        postProcessor: {
          id: "",
          stepId: "",
          type: 0,
          processorType: 1,
          dbConnectionId: "",
          content: "",
        },
        radio: this.StepDetails.requestParamType,
        editor: "",
        drawer: false,
        envValue: this.StepDetails.envId,
        resultButton: false,
        result: {
          data: {},
        },
        activeName: "first",
        form: {
          name: "",
          region: "",
          date1: "",
          date2: "",
          delivery: false,
          type: [],
          resource: "",
          desc: "",
        },
        editorOptions: {
          // 设置代码编辑器的样式
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true,
          tabSize: 2,
          fontSize: 12,
          showPrintMargin: false, //去除编辑器里的竖线
        },
      };
    },
    computed: {
      projectId: function () {
        return this.$store.getters.getProjectId;
      },
    },

    created() {
      this.$dbConnection.dbConnectionList({projectId: this.$store.getters.getProjectId}).then(res => {
        if (res.code == 200) {
          this.dbConnectionList = res.data;
          console.log("拿到数据库连接列表：", this.dbConnectionList)
        }
      }).catch(err => {
        console.error(err)
      })
    },

    methods: {
      editorInit() {
        require("brace/theme/chrome");
        require("brace/ext/language_tools"); //language extension prerequsite...
        require("brace/mode/yaml");
        require("brace/mode/json");
        require("brace/mode/less");
        require("brace/snippets/json");
      },
      xg(value) {
        this.StepDetails.requestParamType = value;
        console.log(value);
      },
      inputChangedF(index, row) {
        console.log(row);
        inputChanged(index, row, {key: "", value: ""});
      },
      inputChangedA(index, row) {
        console.log(row);
        inputChanged(index, row, {checkList: "", value: ""});
      },
      inputChangedP(index, row) {
        console.log(row);
        inputChanged(index, row, {dataType: 0, expression: "", extractName: ""});
      },
      onSubmit() {
        if (this.preProcessor.id == "") {
          delete this.preProcessor["id"]
        }
        if (this.postProcessor.id == "") {
          delete this.postProcessor["id"]
        }

        var processorList = []
        processorList.push(this.preProcessor)
        processorList.push(this.postProcessor)
        this.StepDetails.testCaseProcessors = processorList
        this.StepDetails.requestBody = this.editor;
        this.StepDetails.envId = this.envValue;
        this.StepDetails.requestParams.forEach((item, index) => {
          if (item.key == "") {
            this.StepDetails.requestParams.splice(index, 1);
          }
        });
        this.StepDetails.requestHeader.forEach((item, index) => {
          if (item.key == "") {
            this.StepDetails.requestHeader.splice(index, 1);
          }
        });
        this.StepDetails.requestAssert.forEach((item, index) => {
          if (item.checkList == "") {
            this.StepDetails.requestAssert.splice(index, 1);
          }
        });
        this.StepDetails.requestDataParams.forEach((item, index) => {
          if (item.key == "") {
            this.StepDetails.requestDataParams.splice(index, 1);
          }
        });
        this.StepDetails.parameterExtractions.forEach((item, index) => {
          if (item.expression == "") {
            this.StepDetails.parameterExtractions.splice(index, 1);
          }
        });
        this.$testCaseStep
          .sUpdateOne(this.StepDetails)
          .then((res) => {
            this.$message({
              message: res.message,
              type: "success",
            });
            this.getBack();
          })
          .catch((err) => {
            this.$message.error(err);
          });
        this.StepDetails.requestParams.push({
          key: "",
          value: "",
        });
        this.StepDetails.requestHeader.push({
          key: "",
          value: "",
        });
        this.StepDetails.requestAssert.push({
          checkList: "",
          value: "",
        });
        this.StepDetails.requestDataParams.push({
          key: "",
          value: "",
        });
        this.StepDetails.parameterExtractions.push({dataType: 0, expression: "", extractName: ""});
        console.log("submit!");
      },
      beautiful() {
        try {
          this.editor = JSON.parse(this.editor)
          this.editor = JSON.stringify(this.editor, null, 2)
        } catch (e) {
          this.$message.warning("该字符串非json格式，无法转换");
        }

        console.log(JSON.stringify(this.editor, null, 2))
      },

      changeDate() {
        this.$emit("input", this.StepDetails);
      },
      handleClick(tab, event) {
        // console.log(this.drawer);
        console.log(tab, event);
      },
      handleDelete(index, rows) {
        console.log(rows);
        rows.splice(index, 1);
        // if (this.StepDetails.requestParams.length == 0) {
        //   this.StepDetails.requestParams.push({
        //     key: "",
        //     value: "",
        //   });
        // }
      },
      getBack() {
        this.$emit('getBack')
      }
      // handleAdd(index,rows){
      //   if(this.StepDetails.requestParams[this.StepDetails.requestParams.length-1].key =="" ){
      //     this.$message.error("请先添加参数");
      //   }
      //   else{
      //   this.StepDetails.requestParams.push({
      //     key:"",
      //     value:"",
      //   });
      //   }
      //   console.log(rows.key);
      //   console.log("onClick!!");
      // }
    },
  };
</script>
